<template>
  <div>
    <el-card>
      <el-button icon="Plus" type="primary" @click="handleAdd"
        >添加品牌</el-button
      >
      <el-table class="table" border :data="tableData" :height="tableHeight">
        <el-table-column
          label="序号"
          prop="index"
          align="center"
          width="80px"
          type="index"
        ></el-table-column>
        <el-table-column label="品牌名称" prop="tmName"></el-table-column>
        <el-table-column label="品牌Logo" prop="logoUrl">
          <template #="{ row }">
            <img :src="row.logoUrl" class="logo-img" />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          prop="handler"
          align="center"
          width="150px"
        >
          <template #="{ row }">
            <el-button
              type="primary"
              icon="Edit"
              size="small"
              @click="handleEdit(row)"
            ></el-button>
            <el-popconfirm
              width="220"
              icon="Delete"
              :title="`是否删除${row.tmName}？`"
              @confirm="handleDelete(row.id)"
            >
              <template #reference>
                <el-button type="danger" icon="Delete" size="small"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="limit"
        :page-sizes="[3, 5, 10, 15]"
        :total="total"
        layout="prev, pager, next, total, ->, sizes, jumper"
        size="small"
        background
        @change="handleChange"
      ></el-pagination>
    </el-card>

    <EditDialog
      :form="dialogForm"
      :visible="dialogVisible"
      @update:visible="dialogVisible = $event"
      @update:form="dialogConfirm"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { reqTradeMarkList, delTradeMark } from '@/api/product/trademark'
import type {
  trademarkResponseData,
  trademark
} from '@/api/product/trademark/type'
import { ElMessage } from 'element-plus'
import EditDialog from './dialog/editDialog.vue'

let limit = ref<number>(5)
let total = ref<number>(0)
let pageNo = ref<number>(1)
let tableData = ref<trademark[]>([])
const tableHeight = window.innerHeight - 210 + 'px'

const getTradeMarkList = async () =>
  await reqTradeMarkList(pageNo.value, limit.value).then(
    (res: trademarkResponseData) => {
      tableData.value = res.data.records
      total.value = res.data.total
    }
  )

onMounted(() => {
  getTradeMarkList()
})

const handleChange = (currentPage: number, pageSize: number) => {
  pageNo.value = currentPage
  limit.value = pageSize
  getTradeMarkList()
}

const handleDelete = async (id: number) => {
  await delTradeMark(id).then(() => {
    ElMessage({ type: 'success', message: '删除成功' })
    getTradeMarkList()
  })
}

const dialogForm = reactive<trademark>({
  id: undefined,
  tmName: '',
  logoUrl: ''
})
const dialogVisible = ref<boolean>(false)
const handleAdd = () => {
  Object.assign(dialogForm, { id: undefined, tmName: '', logoUrl: '' })
  dialogVisible.value = true
}
const handleEdit = (row: trademark) => {
  Object.assign(dialogForm, row)
  dialogVisible.value = true
}
const dialogConfirm = () => {
  dialogVisible.value = false
  getTradeMarkList()
}
</script>
<script lang="ts">
export default {
  name: 'TradeMark'
}
</script>

<style lang="scss" scoped>
.table {
  margin: 10px 0;
}
.logo-img {
  width: 100px;
  height: 100px;
}
.dialog-footer {
  text-align: center;
}
</style>
